<style>
	page{
		background: #fafafa;
	}

    .red {
        background: #ff413e;
    }

    .g-content-box {
        width: 100%;
        overflow: hidden;
		padding-bottom: 100upx;
    }

    .m-log {
		padding: 0 5%;
        margin: 0 auto;
        height: 100%;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
    }

    .m-log-list {
        width: 100%;
		position: relative;
		padding-top: 20upx;
    }

    .m-log-line {
		position: absolute;
		top: 26rpx;
		left: -20rpx;
        width: 6upx;
        height: 28rpx;
    }

    .m-log-info {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
        border: 1px solid #e5e5e5;
		padding: 20rpx;
		border-radius: 5px;
		margin: 20rpx 0;
    }

	.m-log-cont .cont-title{
		font-size: 28rpx;
	}
	.m-log-cont .cont-title .price{
		color: #ff4e00;
	}
	.m-log-info .m-log-info-pic{
		width: 120rpx;
		height: 120rpx;
		border-radius: 5px;
		overflow: hidden;
	}
	.m-log-info .m-log-info-pic image{
		width: 100%;
		height: 100%;
		display: block;
	}
	.m-log-info .m-log-form{
		width: 500rpx;
	}
	.m-log-info .m-log-form .title{
		font-size: 28rpx;
		color: #131313;
	}
	.m-log-info .m-log-form .money{
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.m-log-info .m-log-form .money text{
		font-size: 32rpx;
		color: #ff4e00;
		font-weight: bold;
	}
	.zb-turn {
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		color: #ffffff;
		background: #d71611;
		text-align: center;
		font-size: 32rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		position: fixed;
	}
	.zb-turn .btn {
		-webkit-flex: 1;
		flex: 1;
		padding: 25rpx 0;
	}
	.zb-turn .btn.save{
		background-color: #ff976e;
	}
</style>
<template>
    <view>
        <view class="g-content-box">
            <view class="m-log">
                <view class="m-log-list" v-for="(item, index) in data" :key="index" @tap="showDeital(item.id)">
                	<block v-if="item.type == 1">
                		<view class="m-log-line red"></view>
                		<view class="m-log-cont">
                			<view class="cont-title">
                				<view>订单号：{{item.order_no}}</view>
                				<view>下单时间：{{item.create_time}}</view>
                				<view>下单人：{{item.order_man}}</view>
                				<view>{{item.account_type_text}}：<text class="price">{{item.way == 1?'+'+item.amount:'-'+item.amount}}</text></view>
                			</view>
                			<view class="m-log-info">
                				<view class="m-log-info-pic"><image :src="item.goods_img"></image></view>
                				<view class="m-log-form">
                					<view class="title">{{item.goods_name}}</view>
                					<view class="money">支付金额：<text>¥{{item.pay_amount}}</text></view>
                				</view>
                			</view>
                		</view>
                	</block>
                	<block v-if="item.type == 2">
                		<view class="m-log-line red"></view>
                		<view class="m-log-cont">
                			<view class="cont-title">
                				<view>操作时间：{{item.create_time}}</view>
                				<view>{{item.account_type_text}}：<text class="price">{{item.way == 1?'+'+item.amount:'-'+item.amount}}</text></view>
                			</view>
                			<view class="m-log-info" v-if="item.remark">
                				<view class="m-log-form">
                					<view class="title">说明：{{item.remark}}</view>
                				</view>
                			</view>
                		</view>
                	</block>
                </view>
            </view>
        </view>
		
		<view class="zb-turn">
			<navigator class="btn" open-type="navigate" hover-class="none" url="/pages/jewel/agent_jewel/hl_takecash?state=7">退取</navigator>
			<navigator class="btn save" open-type="navigate" hover-class="none" url="/pages/jewel/agent_jewel/hl_keep">申请寄存</navigator>
		</view>
        <view class="m-no-data" v-if="showNodata">
            <image src="../../../static/images/no_data.png" mode="widthFix"></image>
        </view>
		<view class="m-b-loading" v-if="showLoading">
		    <image src="../../../static/images/loading2.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
    </view>
</template>

<script>
	import henglang from '@/common/common_zb.js';
    export default {
        data() {
            return {
                showLoading: false,
                showNodata: false,
                data: [],
				page:1,
				total_pages:1,
				deitalInfo:[],
				isDeital:false
            };
        },
        methods: {
            request(type) {
				let that = this;
				if(that.page <= that.total_pages){
					that.showLoading = true;
					henglang.get('agent_jewel/maker_deal_log',{},true,function(res){
						that.showLoading = false;
						if (!res.data.data.length) { 
							that.data = []
							that.showNodata = true;
							return false;
						}else{
							that.showNodata = false;
						}
						if (type == 'plus') {
							that.data = that.data.concat(res.data.data);
						} else {
							that.data = res.data.data;
							that.total_pages = res.data.total_pages;
						}
					});
				}
            },
			closeDeital() {
				this.isDeital = false;
			},
			showDeital(id) {
				let that = this
				that.isDeital = true
				for (let i = 0; i < that.data.length; i++) {
					if(that.data[i].id == id){
						that.deitalInfo = that.data[i]
					}
				}
			}
        },
		onLoad() {
			this.request();
		},
        onReachBottom() {
			this.page += 1
            this.request('plus');
        }
    }
</script>
